<template>
<div>
  <el-button type="danger" @click="createNavite(orders)">支付</el-button>
  <el-dialog
      title="收银台"
      :visible.sync="zfbdialogVisible"
      width="30%"
  >
    <div style="text-align: center">
      <div style="border: 1px solid #f3f3f3;width: 220px;padding: 10px;margin: 0px auto">
        <vue-qr
            :text="zfbcode_url"
            :margin="0"
            colorDark="green"
            colorLight="#fff"
            :size="200">
        </vue-qr>
      </div>
    </div>
    <el-divider></el-divider>
    <div style="font-size: 13px">
      提示:<br>
      支付成功前请勿手动关闭页面<br>
      二维码两小时内有效,请及时扫码支付<br>
    </div>

  </el-dialog>
</div>
</template>

<script>
export default {
  name: "zfb",
  data(){
    return{
      //支付宝回显路径
      zfbcode_url:"",
      //支付宝框的状态
      zfbdialogVisible:false,

      //支付宝支付对象
      orders:{},
    }
  },
  methods:{
    createNavite(item){
      var that = this;
      this.$http.get("/order/payLog/ali/getStatus?orderNo="+item.orderNo+"&amout="+item.amout+"&product="+item.product+"&body="+item.body).then(function (re){
        if(re != null){
          that.zfbcode_url=re.data.alipay_trade_precreate_response.qr_code;
          console.log(that.zfbcode_url);
        }else {

          that.$message.error("二维码生成失败,请查询订单是否已经支付。");
        }
      })
    },

    aliPayqueryPayStatus(orderNo) {
      console.log("查询的订单号----" + orderNo);
      //订单号为空则停止方法
      if (orderNo == '') {
        console.log("第那个-----------支付宝")
        return;  //结束当前方法
      }
      var that = this;
      this.$http.get(`http://localhost:9000/order/payLog/ali/getAliPayStatus/${orderNo}`).then(r => {
        console.log("请求成功----", r)
        if (r.data.code === 2000) {
          console.log("查询支付成功-----------------")
          //如果支付成功，清除定时器
          clearInterval(that.timer2)
          that.timer2 = null;
          //支付成功显示支付成功的弹框
          that.payStep = 2
          console.log("支付成功");
          //关闭微信的弹框
          this.aliPayShowPay = false;
          that.$message({
            type: 'success',
            message: '支付成功!'
          })
          that.aliPaydialogVisible = false;
          //跳转到课程详情页面观看视频
          //that.$router.push({path: '/course/' + that.payResult.course_id})
        }
      })
    },
  },
  mounted(){
    // 设置一个定时任务，每隔3秒调用一次
    this.timer1 = setInterval(() => {
      this.queryPayStatus(this.payResult.out_trade_no)
    }, 3000);
    this.timer2 = setInterval(() => {
      this.aliPayqueryPayStatus(this.payResult.out_trade_no)
    }, 3000);
  },
}
</script>

<style scoped>

</style>